<template>
  <div class="ds">
    <hrComponent
      :headerData="headerData"
      :tableData="tableData"
      :rowKey="dsrowKey"
    >
      <!-- 添加部门按钮 -->
      <template v-slot:btnSlot>
        <el-button
          @click="drawer = true"
          type="success"
          style="margin-left: 16px"
        >
          +添加部门
        </el-button>

        <!-- 抽屉drawer -->
        <el-drawer
          :size="1200"
          :title="drawerTitle"
          :visible.sync="drawer"
          :direction="direction"
        >
          <!-- 关闭按钮 -->
          <div class="closeBtn" @click="drawer = false">
            <div>关闭</div>
          </div>

          <!-- 抽屉内的实质内容 -->
          <div class="drawBox">
            <!-- 表单验证 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="部门名称"
                    prop="departmentName"
                    label-width="113px"
                  >
                    <el-input
                      v-model="ruleForm.departmentName"
                      placeholder="请输入部门名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="上级部门"
                    prop="frontDepartment"
                    label-width="85px"
                  >
                    <el-select
                      class="select"
                      v-model="ruleForm.frontDepartment"
                      placeholder="请选择上级部门"
                      clearable
                      size="medium"
                    >
                      <el-option
                        label="作为顶级部门"
                        value="topDepartment"
                      ></el-option>
                      
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="部门联系电话" label-width="113px">
                    <el-input
                      v-model="ruleForm.departmentTel"
                      placeholder="请输入部门电话号码，可空"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-button type="primary" @click="submitDraw()" >立即提交</el-button>
                <el-button type="info" plain>重置</el-button>
              </el-row>

              <!-- 上级部门下拉，select -->
            </el-form>
          </div>
        </el-drawer>
      </template>
      <template v-slot:operationBtn="{ operationData }">
        <span class="addBtn" @click="addApartment">添加下级部门</span
        ><span class="editBtn" @click="editDepartment(operationData)">编辑</span
        ><span class="delBtn" @click="delData(operationData)">删除</span>
      </template>
    </hrComponent>
  </div>
</template>
<script>
import hrComponent from "@/components/hrComponent"; //组件
import { dsDataGet } from "@/api/Mock"; //mock数据
export default {
  data() {
    return {
      index:'',//获取tabledata的index
      dsrowKey: "id", //子集是否展开
      drawer: false, //抽屉是否打开
      direction: "rtl", //抽屉方向
      drawerTitle: "部门架构", //抽屉标题

      //抽屉表单校验
      ruleForm: {
        departmentName: "", //部门名称
        frontDepartment: "", //上级部门
        departmentTel: "", //部门电话
      },

      //抽屉校验
      rules: {
        departmentName: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
        ],
        frontDepartment: [
          { required: true, message: "必须选择上级部门", trigger: "change" },
        ],
      },

      headerData: [
        {
          prop: "id",
          label: "ID号",
          width: "150",
        },
        {
          prop: "idFront",
          label: "上级部门ID",
          width: "150",
        },
        {
          prop: "department",
          label: "部门名称",
        },
        {
          prop: "principal",
          label: "部门负责人",
          width: "150",
        },
        {
          prop: "telephone",
          label: "部门电话",
          width: "200",
        },
      ],
      tableData: [
        // {
        //   id: 1,
        //   idFront: 0,
        //   department: "董事会",
        //   principal: "素还真",
        //   telephone: "13688888888",
        //   children: [
        //     {
        //       id: 2,
        //       idFront: 1,
        //       department: "董事会",
        //       principal: "素还真",
        //       telephone: "13688888888",
        //     },
        //     {
        //       it: 3,
        //       id: 3,
        //       idFront: 2,
        //       department: "董事会",
        //       principal: "素还真",
        //       telephone: "13688888888",
        //     },
        //   ],
        // },
      ],
    };
  },
  components: {
    hrComponent,
  },
  methods: {
    // 编辑数据
    editDepartment(operationData){
      this.ruleForm.departmentName=operationData.row.department
      this.ruleForm.frontDepartment='作为顶级部门'
      this.ruleForm.departmentTel=operationData.row.telephone
      this.drawer = true;
      this.index=operationData.$index
      console.log(this.ruleForm.departmentName);
      console.log(operationData);
    },
    // 编辑后提交
    submitDraw(){
      console.log(this.tableData);
      this.tableData[this.index].department=this.ruleForm.departmentName
      this.tableData[this.index].telephone=this.ruleForm.departmentTel
      this.drawer=false
      
      
    },
    // 删除数据
    delData(operationData) {
      console.log(this.tableData);
      console.log(operationData);
      let id = operationData.id;
      console.log(id);

      for (let index in this.tableData) {
        for (let index2 in this.tableData[index].children) {
          if (this.tableData[index].children[index2].id == id) {
            this.tableData[index].children.splice(index2, 1);
          }
        }
        if(this.tableData[index].id==id){
           this.tableData.splice(index,1)
        }
      }
    }, //删除行数据

    addApartment() {
      console.log(1234);
      this.drawer = true;
    },

    // mock获取tableData
    getTableData() {
      let _self = this;
      dsDataGet().then((res) => {
        console.log(res);
        _self.tableData = res.dsData.tableData;
      });
    },
  },
  mounted() {
    this.getTableData();
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.ds .addBtn {
  color: white;
  background-color: #6cc16c;
  border: none;
  padding: 6px;
}
.ds .addBtn:hover {
  cursor: pointer;
}
.ds .editBtn {
  color: white;
  background-color: #3d9cff;
  border: none;
  padding: 6px;
}
.ds .editBtn:hover {
  cursor: pointer;
}
.ds .delBtn {
  color: white;
  background-color: #ff5823;
  border: none;
  padding: 6px;
}
.ds .delBtn:hover {
  cursor: pointer;
}
.ds .el-drawer {
  background-color: #f7f7f7;
  overflow: visible;
}
.ds .el-drawer__header span {
  font-size: 18px;
  color: black;
  font-weight: bolder;
}
.ds .el-form-item__label {
  background-color: #f7f7f7;
}
.ds .drawBox {
  margin-left: 20px;
  position: relative;
}
.ds .select .el-input__inner {
  width: 500px;
}

.ds .el-drawer__wrapper {
  left: 215px;
  top: 100px;
}
.closeBtn {
  position: absolute;
  width: 38px;
  height: 124px;
  padding: 30px 6px;
  line-height: 30px;
  text-align: center;
  left: -38px;
  right: 0;
  top: 20%;
  background-color: #ff5722;
  color: #fff;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  border: 2px solid #fff;
  border-right: none;
  font-weight: 600;
  font-size: 14px;
}
.v-modal {
  left: 213px;
  top: 100px;
}
.el-drawer__container {
  position: absolute;
}
</style>